<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>地区三级联动</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="container mx-auto p-8 bg-white rounded-lg shadow-md">
        <h1 class="text-2xl font-bold text-center mb-6">地区三级联动选择</h1>
        <div class="flex justify-center space-x-4">
            <!-- Province Dropdown -->
            <select id="province" class="w-1/3 p-2 border rounded">
                <option value="">请选择省份</option>
            </select>

            <!-- City Dropdown -->
            <select id="city" class="w-1/3 p-2 border rounded">
                <option value="">请选择城市</option>
            </select>

            <!-- District Dropdown -->
            <select id="district" class="w-1/3 p-2 border rounded">
                <option value="">请选择区县</option>
            </select>
        </div>
    </div>

    <script>
        const regionData = {
            "浙江省": {
                "杭州市": ["西湖区", "上城区", "拱墅区"],
                "宁波市": ["海曙区", "江北区", "镇海区"]
            },
            "江苏省": {
                "南京市": ["玄武区", "秦淮区", "建邺区"],
                "苏州市": ["姑苏区", "虎丘区", "吴中区"]
            }
        };

        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const districtSelect = document.getElementById('district');

        // Populate provinces
        for (const province in regionData) {
            const option = document.createElement('option');
            option.value = province;
            option.textContent = province;
            provinceSelect.appendChild(option);
        }

        // Handle province change
        provinceSelect.addEventListener('change', function() {
            const selectedProvince = this.value;
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            districtSelect.innerHTML = '<option value="">请选择区县</option>';

            if (selectedProvince && regionData[selectedProvince]) {
                for (const city in regionData[selectedProvince]) {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                }
            }
        });

        // Handle city change
        citySelect.addEventListener('change', function() {
            const selectedProvince = provinceSelect.value;
            const selectedCity = this.value;
            districtSelect.innerHTML = '<option value="">请选择区县</option>';

            if (selectedCity && regionData[selectedProvince] && regionData[selectedProvince][selectedCity]) {
                regionData[selectedProvince][selectedCity].forEach(district => {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            }
        });
    </script>
</body>
</html>